{layout name="layout/default" /}

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card">
                {if $detail.cover}
                <img src="{$detail.cover}" class="card-img-top" alt="{$detail.title}">
                {/if}
                <div class="card-body">
                    <h1 class="card-title">{$detail.title}</h1>
                    <div class="mb-3">

                    </div>

                    {if $detail.description}
                    <div class="card-text text-muted mb-4">
                        {$detail.description}
                    </div>
                    {/if}

                    <div class="article-content">
                        {$detail.content}
                    </div>
                </div>

                <div class="card-footer bg-white">
                    <div class="text-center">
                        <button type="button" class="btn btn-outline-danger btn-like" data-id="{$detail.id}">
                            <i class="fa fa-heart"></i> 点赞 (<span class="like-count">{$detail.likes}</span>)
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{block name="script"}
<script>
    $(function () {
        // 点赞功能
        $('.btn-like').on('click', function () {
            var $btn = $(this);
            var id = $btn.data('id');
            $.post("{:url('article/like')}", { id: id }, function (res) {
                if (res.code === 1) {
                    $('.like-count').text(res.data.likes);
                    Layer.msg('点赞成功');
                } else {
                    Layer.msg(res.msg);
                }
            });
        });
    });
</script>
{/block}